<template>
  <tspan v-for='(item,index) in params' :key='index' x="0" :y="item.y">{{item.text}}</tspan>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent( {
  name: 'TextRow',
  props: {
    fontSize: {
      type: Number
    },
    y: {
      type: Number
    },
    size: {
      type: Number
    },
    text: {
      type: String
    }
  },
  setup (props) {
    interface rowText {
      y: number,
      text: string
    }
    let params = ref<rowText[]>()
    function getRows ():void {
      let start: number = 0;
      let end: number = Number(props.size)
      let s: string = "";
      const rows: rowText[] = []
      let times = 0;
      do {

        s = props.text.substr(start,end);
        rows.push({
          y: Number(props.y) + (Number(props.fontSize) + 20 )* times,
          text: s
        })
        start += end;
        times ++
       } while (s !== "")
      params.value = rows
    }
    onMounted(() => {
      getRows()
    })
    return {
      params
    }

  }
});
</script>

<style scoped>

</style>
